<template>
  <div>
    <h2>用户统计</h2>
    <table class="bordered-table">
      <thead>
        <tr>
          <th>标签组</th>
          <th>筛选出的无充值记录账户</th>
          <th>首次充值时间</th>
          <th>最后充值时间</th>
          <th>充值时间跨度</th>
          <th>用户总充值金额</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="(group, index) in filteredGroups">
          <tr :key="'group-' + index">
            <td :rowspan="group.accounts.length + 1">{{ group.label }}</td>
          </tr>
          <tr v-for="(account, i) in group.accounts" :key="'account-' + i +  Math.random()">
            <td>{{ account.account }}</td>
            <td>{{ account.firstRechargeTime }}</td>
            <td>{{ account.lastRechargeTime }}</td>
            <td>{{ account.rechargeTimeSpan }}</td>
            <td>{{ account.totalRechargeAmount }}</td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, 充值帐户: "普通用户1", 充值时间: "2023-06-01 10:30:15", 充值金额: 5, 标签: "4B", 注册时间: "2023-05-20 14:20:00" },
        { id: 2, 充值帐户: "普通用户2", 充值时间: "2023-05-11 08:50:43", 充值金额: 2, 标签: "4B", 注册时间: "2023-05-11 08:50:43" },
        { id: 3, 充值帐户: "普通用户1", 充值时间: "2023-06-12 16:40:22", 充值金额: 10, 标签: "4A", 注册时间: "2023-06-01 09:15:10" },
        { id: 4, 充值帐户: "普通用户1", 充值时间: "2023-06-04 6:20:22", 充值金额: 10, 标签: "4A", 注册时间: "2023-06-01 09:15:10" },
        { id: 5, 充值帐户: "普通用户1", 充值时间: "2023-06-8 16:40:22", 充值金额: 10, 标签: "4A", 注册时间: "2023-06-01 09:15:10" },
        { id: 6, 充值帐户: "普通用户3", 充值时间: "2023-06-10 16:40:22", 充值金额: 10, 标签: "4A", 注册时间: "2023-06-01 09:15:10" },
        { id: 7, 充值帐户: "普通用户3", 充值时间: "2023-06-08 6:20:22", 充值金额: 10, 标签: "4A", 注册时间: "2023-06-01 09:15:10" },
        { id: 8, 充值帐户: "普通用户x", 充值时间: "2023-06-08 6:20:22", 充值金额: 10, 标签: "4A", 注册时间: "2023-06-01 09:15:10" },

        // Add more data entries as needed
      ],
      labelGroups: [],
      filteredGroups: []
    };
  },
  mounted() {
    console.log('-=--',this.groupDataByLabel())
    console.log('-=-----',this.filterGroupsByRecharge())
    this.labelGroups = this.groupDataByLabel();
    this.filteredGroups = this.filterGroupsByRecharge();
  },
  methods: {
    filterGroups(data) {
        const filteredData = [];
        const accounts = {};

        data.forEach(entry => {
          const account = entry.充值帐户;
          const rechargeTime = new Date(entry.充值时间);

          if (!accounts[account]) {
            accounts[account] = {
              account: account,
              lastRechargeTime: rechargeTime,
              firstRechargeTime: rechargeTime,
              totalRechargeAmount: entry.充值金额
            };
          } else {
            if (rechargeTime > accounts[account].lastRechargeTime) {
              accounts[account].lastRechargeTime = rechargeTime;
            }
            if (rechargeTime < accounts[account].firstRechargeTime) {
              accounts[account].firstRechargeTime = rechargeTime;
            }
            accounts[account].totalRechargeAmount += entry.充值金额;
          }
        });

        for (const account in accounts) {
          const firstRechargeTime = accounts[account].firstRechargeTime;
          const lastRechargeTime = accounts[account].lastRechargeTime;
          const rechargeTimeSpan = Math.floor((lastRechargeTime - firstRechargeTime) / (1000 * 60 * 60 * 24)) + 1;

          filteredData.push({
            label: accounts[account].标签,
            account: account,
            lastRechargeTime: this.formatDate(accounts[account].lastRechargeTime),
            firstRechargeTime: this.formatDate(accounts[account].firstRechargeTime),
            rechargeTimeSpan: rechargeTimeSpan,
            totalRechargeAmount: accounts[account].totalRechargeAmount
          });
        }

        return filteredData;
      },
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    groupDataByLabel() {
      const groups = {};
      this.data.forEach(entry => {
        const label = entry.标签;
        if (groups[label]) {
          groups[label].push(entry);
        } else {
          groups[label] = [entry];
        }
      });
      return Object.keys(groups).map(label => ({ label, accounts: groups[label] }));
    },
    filterGroupsByRecharge() {
      const today = new Date().getTime()
      const halfMonthAgo = new Date();
      halfMonthAgo.setDate(new Date().getDate() - 15);
      console.log(this.labelGroups,68);

      return this.labelGroups.map(group => {
        // debugger
        const filteredAccounts = group.accounts.filter(account => {
          const rechargeTime = new Date(account.充值时间).getTime()
          // console.log('rechargeTime',rechargeTime);
          // console.log('halfMonthAgo.getTime()',halfMonthAgo.getTime());
          return rechargeTime <= halfMonthAgo.getTime()
        });

        console.log('filteredAccounts', filteredAccounts);
        const filterData = this.filterGroups(filteredAccounts)
        console.log(138,filterData);

        const lastRechargeTime = filteredAccounts.length > 0 ? filteredAccounts[0].充值时间 : '-';
        const firstRechargeTime = filteredAccounts.length > 0 ? filteredAccounts[filteredAccounts.length - 1].充值时间 : '-';
        const rechargeTimeSpan = filteredAccounts.length > 0 ? this.calculateTimeSpan(firstRechargeTime, lastRechargeTime) : '-';
        const totalRechargeAmount = filteredAccounts.reduce((total, account) => total + account.充值金额, 0);

        return {
          label: group.label,
          accounts: filterData.map(x => ({
            account: x.account,
            lastRechargeTime: x.lastRechargeTime,
            firstRechargeTime: x.firstRechargeTime,
            rechargeTimeSpan: x.rechargeTimeSpan,
            totalRechargeAmount: x.totalRechargeAmount
          })),
          lastRechargeTime,
          firstRechargeTime,
          rechargeTimeSpan,
          totalRechargeAmount
        };
      });
    },
    calculateTimeSpan(startTime, endTime) {
      const start = new Date(startTime);
      const end = new Date(endTime);
      const timeDiff = Math.abs(end - start);
      const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
      return `${days} 天`;
    }
  }
}

</script>

<style scoped>
.bordered-table {
  border-collapse: collapse;
  width: 100%;
}

.bordered-table th,
.bordered-table td {
  border: 1px solid #ccc;
  padding: 8px;
}

.bordered-table th {
  background-color: #f2f2f2;
}

.bordered-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.bordered-table tr:hover {
  background-color: #ebebeb;
}
</style>